<template>
	<view style="padding: 20rpx;height: 100%;">
		<view class="display_flex u-m-b-20 bgfff u-p-20">
			<!-- <el-button type="primary" size="mini" @click="addBanner" class="u-m-r-20" icon="el-icon-plus">
				新增微信群图片
			</el-button> -->

			<!-- <view class="u-flex">
				<el-date-picker v-model="bannerParams.time" type="month" placeholder="选择时间" size="mini"
					@change="getData()" format="yyyy-MM" value-format="yyyy-MM" />
			</view> -->
		</view>

		<view class="u-padding-20 bgfff" style="height: calc(100% - 100rpx);width: 100%;">
			<el-table :data="bannerList" style="width: 100%" stripe border size="mini" height="95%">
				<!-- <el-table-column type="index" width="50">
				</el-table-column>

				<el-table-column prop="time" label="签到日期">
				</el-table-column>

				<el-table-column prop="title" label="标题">
				</el-table-column> -->
				<el-table-column prop="image" label="图片">
					<template slot-scope="scope">
						<el-image v-if="scope.row.image" style="width: 200px; height: 80px" :src="scope.row.image" />
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" label="上传日期">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<!-- <el-button @click="deleteThis(scope.row)" type="text" size="small">删除</el-button> -->
						<el-button type="text" size="small" @click="editThis(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<view class="u-text-right bgfff u-padding-20">
				<el-pagination @current-change="handleCurrentChange" small :current-page="params.pageNum"
					:page-sizes="[20, 40, 60,80,100]" :page-count="maxPage" layout="total, sizes, prev, pager, next, jumper"
					:total="maxCount">
				</el-pagination>
			</view>
		</view>

		<el-dialog title="微信群编辑" :visible.sync="bannerShow" top="10vh" width="50%">

			<view @click="select">
				<el-image v-if="wxGroupParams.image" style="width: 100px; height: 100px" :src="wxGroupParams.image" />
				<button v-else>上传微信群</button>
			</view>


			<view class="u-padding-20 bgfff" style="width: 100%;">
				<!-- <view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 160rpx;">标题：</view>
					<el-input placeholder="请输入标题" v-model="wxGroupParams.title" size="mini" />
				</view> -->

				<picker mode="date" @change="(e)=>{wxGroupParams.time = e.detail.value}">
					<view class="display_flex" style="margin-bottom: 20rpx;">
						<view style="width: 160rpx;">日期：</view>
						<el-input placeholder="请输入日期" v-model="wxGroupParams.time" size="mini" />
					</view>
				</picker>
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="bannerShow = false" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="图片裁剪" :visible.sync="bannerShow1" top="5vh" width="50%">
			<vueCropper ref="cropper" :img="wxGroupParams.image" :outputSize="1" outputType="png" :fixed="true"
				:fixedNumber="[600,600]" :fixedBox="true" :autoCrop="true" :centerBox="true" style="height: 600px;" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="bannerShow1 = false" size="mini">取 消</el-button>
				<el-button type="primary" @click="getcropImage" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import {
		VueCropper
	} from 'vue-cropper'
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	let that
	export default {
		components: {
			VueCropper
		},
		data() {
			return {
				dialogShow: false,
				bannerShow: false,
				bannerShow1: false,

				chooseItem: '',
				artpptList: [],
				bannerList: [],
				maxCount: 1,
				maxPage: 1,

				wxGroupParams: {
					time: '',
					image: '',
					artpptId: '',
					title: '',
				},

				bannerParams: {
					time: '',
				},

				params: {
					pageSize: 20,
					pageNum: 1,
					typeDesc: '',
					searchText: '',
				}
			}
		},

		onLoad() {
			that = this
			that.bannerParams.time = that.common.getMonth(0)
			that.wxGroupParams.time = that.common.getDay(0)
			that.getData()
		},

		methods: {

			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.wxGroupParams.image = rst.tempFilePaths[0];
						this.bannerShow1 = true
					}
				});
			},

			getcropImage() {
				this.$refs.cropper.getCropBlob(async data => {
					// do something
					let key = await uploadFile(this.cblobToFile(data, "wGroup1090637044.png"),
						"wGroup1090637044.png", "brand");
					this.wxGroupParams.image = 'https://' + key
					this.bannerShow1 = false
				})
			},

			cblobToFile(blob, fileName) {
				return new window.File([blob], fileName, {
					type: blob.type
				})
			},

			addBanner() {
				that.bannerShow = true
				delete that.wxGroupParams.objectId
			},

			editThis(item) {
				that.wxGroupParams.image = item.image
				that.wxGroupParams.objectId = item.objectId
				that.wxGroupParams.artpptId = item.artpptId
				that.wxGroupParams.title = item.title
				that.wxGroupParams.time = item.createdAt
				that.bannerShow = true
			},

			deleteThis(item) {
				uni.showModal({
					content: "是否删除此条目",
					success(res) {
						if (res.confirm) {
							that.$http.Post("wx/wxGroup/remove", {
								objectId: item.objectId
							}, "加载中...").then(res => {
								that.getData()
							})
						}
					}
				})
			},

			//添加微信群
			confirmAdd() {
				this.$http.Post("wx/wxGroup/save", that.wxGroupParams, "加载中...").then(res => {
					that.bannerShow = false
					that.getData()
				})
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getArtpptData()
			},

			//获取微信群
			getData() {
				this.$http.Post("wx/wxGroup/list", that.bannerParams, "加载中...").then(res => {
					this.bannerList = res.data
				})
			},

			getArtpptData() {
				this.$http.Post("admin/artPPT/list", that.params, "加载中...").then(res => {
					this.artpptList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
				})
			}
		}
	}
</script>

<style>

</style>